import React, { useState, useEffect, useRef } from 'react'
import './chart.less'
import { Chart } from '@antv/g2'

const Charts = () => {
	const chartRef = useRef()
	const data = [
		{ name: '杭州银行', score: 2, num: 5, city: 'bj' },
		{ name: '南京银行', score: 4, num: 11, city: 'bj' },
		{ name: '江西邮储', score: 8, num: 13, city: 'bj' },
		{ name: '农业银行', score: 5, num: 9, city: 'bj' },
		{ name: '工商银行', score: 9, num: 6, city: 'bj' },
		{ name: '人民银行', score: 3, num: 29, city: 'bj' },
	]

	const [chart, setChart] = useState(null)

	useEffect(() => {
		if (data && !chart) {
			const c = new Chart({
				container: 'c7',
				autoFit: true,
				width: 500,
				height: 300,
			})
			setChart(c)
		}
	}, [data])

	useEffect(() => {
		chart && renderChart()
	}, [chart, data])

	const renderChart = () => {
		const nums = data.map((i) => i.num)
		const maxValue = Math.max(...nums)
		const max = Math.ceil(maxValue / 10) * 10
		const margin = 1 / 5

		chart.legend(false)
		chart.removeInteraction('legend-item:click:')

		chart.clear()
		chart.data(data)

		chart.scale('score', {
			min: 0,
			max: 10,
			tickCount: 6,
			range: [0, 1 - margin / 2],
		})

		const tick = max / 5
		let ticks = new Array(6).fill(null)
		ticks = ticks.map((i, t) => t * tick)
		chart.scale('num', {
			min: 0,
			max: max,
			ticks: ticks,
			tickCount: 6,
			range: [0, 1 - margin / 2],
		})

		chart.scale('city', {
			min: 0,
			max: max,
			ticks: ticks,
			tickCount: 6,
			range: [0, 1 - margin / 2],
		})

		chart.scale('name', {
			nice: true,
		})

		chart.axis('city', {
			label: {
				formatter: () => '',
			},
		})

		chart.axis('num', {
			title: {
				text: '单位: 个',
				autoRotate: false,
				position: 'end',
				offset: -10,
				textStyle: {
					textAlign: 'start', // 文本对齐方向，可取值为： start middle end
					fontSize: '12', // 文本大小
					fontWeight: 'bold', // 文本粗细
					textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
				},
			},
		})

		chart.axis('score', {
			title: {
				text: '单位: 分',
				autoRotate: false,
				position: 'end',
				offset: -10,
				textStyle: {
					textAlign: 'start', // 文本对齐方向，可取值为： start middle end
					fontSize: '12', // 文本大小
					fontWeight: 'bold', // 文本粗细
					textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
				},
			},
		})

		chart.axis('name', {
			label: {
				autoRotate: true,
				autoHide: false,
			},
		})

		chart.interaction('active-region')

		chart
			.interval()
			.label('num', {
				offset: -10,
			})
			.size(36)
			.position('name*num')
			.tooltip('num*score', (num, score) => {
				return {
					num,
					score,
				}
			})

		chart.line().position('city').style({
			stroke: 'transparent',
		})

		chart.legend({
			custom: true,
			position: 'bottom',
			flipPage: false,
			items: [
				{
					name: '项目',
					marker: {
						symbol: 'square',
						style: {
							fill: '#6395f9',
						},
						clickable: false,
					},
				},
				{
					name: '评分',
					marker: {
						symbol: 'circle',
						style: {
							fill: '#f59a23',
						},
						clickable: false,
					},
				},
			],
		})

		const itemTpl = `
            <div class='chart7Tpl'>
                <div class='tpl'>
                    <span class="tpl1">·</span>
                    评分:&nbsp;&nbsp;&nbsp;{score} 分
                </div>
                <div class='tpl'>
                    <span class="tpl2">·</span>
                    项目:&nbsp;&nbsp;&nbsp;{num} 个
                </div>
            </div>
        `

		chart.tooltip({
			showTitle: true,
			showMarkers: false,
			itemTpl: itemTpl,
		})

		chart
			.line()
			.position('name*score')
			.size(4)
			.color('', () => '#f59a23')
			.tooltip('num*score', (num, score) => {
				return {
					num,
					score,
				}
			})

		chart.removeInteraction('legend-filter')
		chart.render()
	}

	return (
		<div className={'chart7'}>
			<div id="c7" ref={chartRef} />
		</div>
	)
}

export default Charts
